<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>pos-cashier</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<header class="navbar-fixed-top">
		<div class="navbar-header">
			<span class="glyphicon glyphicon-option-vertical"></span>
			<label>服装店Pos管理系统</label>
		</div>
		<div>
			<ul class="nav navbar-nav navbar-right">
				<li><a>欢迎你！</a></li>
				<li><a href="#">个人信息</a></li>
				<li><a id="loginOrOut" href="" ></a></li>
			</ul>
		</div>
	</header>
	<nav class="navbar navbar-default nav-bgcolor navbar-fixed-top nav-vertical">
		<div class="container-fluid">
			<ul class="nav nav-stacked">
				<li><a href="storehouse.html" >商品管理</a></li>
				<li><a href="order.html">订单管理</a></li>
				<li><a href="#">会员管理</a></li>
				<li id="showQuanXian"><a href="quanxian.html">员工管理</a></li>
				<li><a href="cashier.html">支付</a></li>
			</ul>
		</div>
	</nav>
	<div class="row">
		<div id="cashier-left" class="col-md-5">
			<form class="form-inline" role="form">
				<div class="input-group">
					<span class="input-group-addon glyphicon glyphicon-barcode"></span>
					<input id="goodNo" type="text" class="form-control" style="width: 400px" placeholder="请输入商品编号，例如A00019">
					<div class="input-group-btn"><button type="button" id="btn-goodId-confirm" class="btn btn-primary" data-keyboard="false" data-backdrop="static">确认</button></div>
				</div>
			</form>
			<div class="panel panel-default">
				<!-- orderList表头-->
				<table id="orderList" class="table table-head">
					<colgroup>
						<col width="38%"/><col width="20%"/><col width="19%"/><col width="25%"/>
					</colgroup>
					<thead>
						<tr>
							<th style="display:none">detailId</th><th style="text-align: center;">品名</th><th>数量</th><th>单价</th><th>小计</th>
						</tr>
					</thead>
					<!-- orderList表体 -->
					<tbody class="table table-condensed"></tbody>
				</table>
			</div>
			<!-- 在#goodNo框输入goodNo后，弹出对应的goodDetail表格-->
			<div id="showGoodDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="search goodDetail" aria-hidden="true" >
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" data-dismiss="modal" class="close" onclick="resetGoodDetailList();">&times;</button>
							<h4>商品详情</h4>
						</div><!-- /.modal-header -->
						<div class="modal-body">
							<table id="goodDetailList" class="table table-head">
								<colgroup>
									<col width="23%"/><col width="13%"/><col width="13%"/><col width="13%"/><col width="10%"/><col width="10%"/><col width="10%"/><col width="14%"/>
								</colgroup>
								<thead>
									<tr>
										<th style="display:none">detailId</th><th style='text-align:center'>品名</th><th>价格</th><th>尺寸</th><th>年龄</th><th>颜色</th><th>性别</th><th>库存</th><th style='text-align:center'>操作</th>
									</tr>
								</thead>
								<tbody  class="table">
									
								</tbody>
							</table>
						</div><!-- /.modal-body -->
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetGoodDetailList();">完成</button>
						</div><!-- /.modal-footer -->
					</div><!-- /.modal-content -->
				</div>
			</div>
			<div id="orderlist-footer">
				<button type="button" class="btn btn-success" onclick="addOrder();">添加订单</button>
				<button type="button" class="btn btn-info" onclick="resetOrder();">清空列表</button>
				<label>数量：</label><span id="totalNum"></span>
				<label>合计：</label><span style="color: red;">￥</span><span class="totalPrice price"></span>
			</div>
		</div>
		<div id="cashier-right" class="col-md-5">
			<div id="cashier-right-top">
				<table>
					<tr>
						<td>应收</td><td>实收</td><td>找零</td>
					</tr>
					<tr>
						<td>￥<span class="totalPrice"></span></td><td>￥<span id="receiptPrice"></span></td><td>￥<span id="balance"></span></td>
					</tr>
				</table>
			</div>
			<div id="keyboard">
				<table>
					<tr>
						<td><button type="button" class="btn btn-info">现金支付</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('1')" value="1">1</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('2')" value="2">2</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('3')" value="3">3</button></td>
						<td><button type="button" class="btn btn-danger" onclick="inputNum('100')" value="100">￥100</button></td>
					</tr>
					<tr>
						<td><button type="button" class="btn btn-info" onclick="howToPay('zhifubao')" value="zhifubao">支付宝</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('4')" value="4">4</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('5')" value="5">5</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('6')" value="6">6</button></td>
						<td><button type="button" class="btn btn-danger" onclick="inputNum('50')" value="50">￥50</button></td>
					</tr>
					<tr>
						<td><button type="button" class="btn btn-info" onclick="howToPay('weixin')" value="weixin">微信支付</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('7')" value="7">7</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('8')" value="8">8</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('9')" value="9">9</button></td>
						<td><button type="button" class="btn btn-danger" onclick="inputNum('20')" value="20">￥20</button></td>
					</tr>
					<tr>
						<td><button type="button" class="btn btn-info" onclick="howToPay('card')" value="card">银行卡</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('0')" value="0">0</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('00')" value="00">00</button></td>
						<td><button type="button" class="btn btn-default" onclick="inputNum('.')" value=".">.</button></td>
						<td><button type="button" class="btn btn-danger" onclick="inputNum('10')" value="10">￥10</button></td>
					</tr>
					<tr>
						<td><button type="button" class="btn btn-info">心连心信用</button></td>
						<td><button type="button" class="btn btn-default" onclick="delNum()">删除</button></td>
						<td><button type="button" class="btn btn-default" onclick="resetReceipt()">清空</button></td>
						<td colspan="2"><button type="button" class="btn btn-success" onclick="balance();">结算</button></td>
					</tr>
				</table>
			</div>
			<div id="cashier-right-btn">
				<button type="button" class="btn btn-default btn-circle">挂单</button>
				<button type="button" class="btn btn-default btn-circle">取单</button>
				<button type="button" class="btn btn-default btn-circle">其他</button>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			if($("#showGoodDetail").hide()){
				resetGoodDetailList();
			}
			
			updateTotalnumAndTotalprice();
			
			$("#receiptPrice").html("");
			
			balance();
			
			$.ajax({
				url : '/ClothesShopPOS/log/check_login',
                type: "get",
                cache : false,
                success : function(data) {
                    console.log(data);
                    data = JSON.parse(data);
                    if (data=='0'){
                        $("#loginOrOut").html("登录");
                        $("#loginOrOut").attr("href","login.html");
                    }else if(data=='1'){
                       $("#loginOrOut").html("退出");      
                       $("#loginOrOut").click(function(){
                       		if(confirm("确认退出吗？")){
                       			$.ajax({
		                       		url : '/ClothesShopPOS/log/logout',
					                type: "post",
					                cache : false,
					                success : function(data) {
					                	console.log(data);
		                    			data = JSON.parse(data);
		                    			if(data.statusCode=='0'){
		                    				alert("退出成功");
		                    				window.location.href="login.html";
		                    			}else{
		                    				alert("失败");
		                    			}
					                }
		                     	}) 
                       		}
                       		
                       });                
                	}
                }
			})
			
			$.ajax({
				url : '/ClothesShopPOS/log/check_superadmin',
                type: "get",
                cache : false,
                success : function(data) {
                	console.log(data);
           			data = JSON.parse(data);
           			if(data=='0'){
           				//alert("成功");
           				$("#showQuanXian").remove();
           			}
                }
			})
	
		});
	
		/********输入goodId，点击确定键********/
		$("#btn-goodId-confirm").click(function(){
			if($("#goodNo").val()==""){//判断goodId文本框是否为空
				alert("goodNo不能为空！");
			}else{
				$("#btn-goodId-confirm").attr({
					"data-toggle":"modal",
					"data-target":"#showGoodDetail"
				});
				$.ajax({
					url : '/ClothesShopPOS/good/get_by_goodno',
					type : "get",
					cache : false,
					dataType:"json",
					data:{
						goodNo:$("#goodNo").val()
					},
					success:function(data){
						//alert("good");
						console.log(data);
						
						var resultGood=JSON.parse(data).result;
						var table=$("#goodDetailList");
						//alert(typeof resultGoodDetail);
					    if(resultGood==null){
					    	
					    	var sth=$("<tr><td colspan='2'>请输入正确的goodNo！</td></tr>");
							sth.appendTo(table);
					    }else{
					    	$.ajax({
						    	url:'/ClothesShopPOS/gooddetail/get_by_goodid',
						    	type : "get",
								cache : false,
								dataType:"json",
								data:{
									goodId:resultGood.id
								},
								success:function(data){
									console.log(data);
									
									var resultGoodDetail=JSON.parse(data).result;
								
									for(var i=0;i<resultGoodDetail.length;i++){
										var temp=$("<tr><td style='display:none'>"+resultGoodDetail[i].id+"</td>"
										+"<td style='text-align:center'>"+resultGood.title+"</td>"
										+"<td>"+resultGoodDetail[i].referencePrice+"</td>"
										+"<td>"+resultGoodDetail[i].size+"</td>"
										+"<td>"+resultGoodDetail[i].age+"</td>"
										+"<td>"+resultGoodDetail[i].color+"</td>"
										+"<td>"+resultGoodDetail[i].gender+"</td>"
										+"<td>"+resultGoodDetail[i].stock.count+"</td>"
										+"<td rowspan='2'><button type='button' class='btn btn-default' onclick='addToOrderList(this);'>添加</button></tr>"
										+"<tr><td style='text-align:center'>"+resultGood.goodNo+"</td></tr>");
										
										temp.appendTo(table);
									}
									
									$("#goodId").val("");
									
								}
						    })//第二个ajax结束
					    }
					    
					}
				})//第一个ajax结束
			}
			
		});
		
		/**在goodDetailList中点击关闭按钮后，清空goodDetailList**/
		function resetGoodDetailList(){
			$("#goodDetailList tbody").html("");
		}
		
		/**在goodDetailList中点击添加按钮后，添加到orderList表格中**/
		function addToOrderList(btn){
			var tr=btn.parentNode.parentNode;
			var detailId=tr.cells[0].innerHTML;//对应goodDetail表里面的id
			var title=tr.cells[1].innerHTML;
			var referencePrice=tr.cells[2].innerHTML;
			var size=tr.cells[3].innerHTML;
			var age=tr.cells[4].innerHTML;
			var color=tr.cells[5].innerHTML;
			var gender=tr.cells[6].innerHTML;
			var count=tr.cells[7].innerHTML;
			
			
			var num=prompt("请输入购买数量：","1");
			if(num > parseInt(count)){
				alert("超过库存数量！");
			}else{
				var temp=$("<tr><td style='display:none'>"+detailId+"</td>"
				+"<td style='text-align:center;'>"+title+"</td>"
				+"<td>"+num+"</td>"
				+"<td>"+referencePrice+"</td>"
				+"<td>"+referencePrice*num+"</td>"
				+"<td><buttom class='close' onclick='delOneOrder(this);'>&times;</button></td></tr>"
				+"<tr><td colspan='5'>尺寸:"+size+"&nbsp;&nbsp;&nbsp;|年龄段: "+age+"&nbsp;&nbsp;&nbsp;|性别: "+gender+"&nbsp;&nbsp;&nbsp;|颜色: "+color+"</td></tr>");
				
				$("#orderList").append(temp);
			}
			
			updateTotalnumAndTotalprice();
		}
		
		/*添加到order_item和order_tot表*/
		function addOrder(){
			
			if($("#orderList tbody").html()==""){
				alert("请选择添加商品！");
			}else{
				//alert("进入方法");
				var orderDetailList=new Array();
				var tr=$("#orderList tbody tr:even");
				for(var i=0;i<tr.length;i++){
					//alert(tr.eq(i).find("td").eq(2).text());
					orderDetailList.push({
	                "detailId" : tr.eq(i).find("td").eq(0).text(),// 
	                "receipt" : tr.eq(i).find("td").eq(4).text(),//总价钱
	                "num" : tr.eq(i).find("td").eq(2).text(),// TODO
	                "promotionId" : ""// TODO
	            	});
				}
	            
	            var itemNum = 0;
	            for (var i=0;i<orderDetailList.length;i++){
	            	
	            	itemNum+=parseInt(orderDetailList[i].num);
	            }
	        
	
	            var order={
	                "vipId" : "123", // TODO
	                "payWay" : "支付宝",// TODO
	                "itemNum" : itemNum,
	                "promotionId" : ""// TODO
	            };
	
	            var params = {
	                "order" : order,
	                "orderDetailList" : orderDetailList,
	            };
	
	            //alert(JSON.stringify(params));
	
	             $.ajax({
	                url : '/ClothesShopPOS/ordertot/add',
	                type: "POST",
	                contentType : "application/json;charset=utf-8",
	                dataType : "json",
	                data : JSON.stringify(params),
	                success : function(data) {
	                    console.log(data);
	                    //data = JSON.parse(data);
	                    if (data.statusCode=='0'){
	                        alert("添加成功");
	                    }else if(data.statusCode=='11'){
					    	alert("您的权限不够，不能执行此操作！");
					    }else
	                        alert("添加失败");
	                }
	            }) 
			}
			
		}
		
		/*清空#orderList*/
		function resetOrder(){
			if(confirm("是否清空此订单？")){
				$("#orderList tbody").html("");
				updateTotalnumAndTotalprice();
			}
		}
		
		/*订单表#orderList中的删除*/
		function delOneOrder(btn){
			var tr1=$(btn).parent().parent();
			tr1.next().remove();
			tr1.remove();//顺序不能换，先删除tr1，就无法找到tr1.next()
			updateTotalnumAndTotalprice();
		}
		
		/*更新总数量和应收金额*/
		function updateTotalnumAndTotalprice(){
			var totalPrice=0,totalNum=0;
			var oltr=$("#orderList tbody tr:even");
			for(var i=0;i<oltr.length;i++){
				var price=oltr.eq(i).find("td").eq(4).text();//price是string类型
				var number=oltr.eq(i).find("td").eq(2).text();
				totalPrice+=parseInt(price);
				totalNum+=parseInt(number);
			}	
			$(".totalPrice").html(totalPrice);
			$("#totalNum").html(totalNum);
		}
		
		/*输入实收金额*/
		function inputNum(num){
			//$("#receiptPrice").html("");
			var receiptPrice=$("#receiptPrice").text();
			receiptPrice+=num;
			$("#receiptPrice").html(receiptPrice);
			
		}
		
		function howToPay(how){
			var t=$("#cashier-right .totalPrice").text();
			//alert(t);
			if(how === "zhifubao"){
				$("#receiptPrice").html(t);
				alert("支付宝支付成功！");
			}else if(how === "weixin"){
				$("#receiptPrice").html(t);
				alert("微信支付成功！");
			}else if(how === "card"){
				$("#receiptPrice").html(t);
				alert("银行卡支付成功！");
			}
		}
		
		function resetReceipt(){
			$("#receiptPrice").html("0");
		}
		
		function delNum(){
			var str=$("#receiptPrice").text(),pos=str.length-1;
			str=str.slice(0,pos);
			$("#receiptPrice").html(str);
		}
		
		function balance(){
			
			var balance;
			var receiptPrice=parseInt($("#receiptPrice").text());
			var totalPrice=parseInt($("#cashier-right .totalPrice").text());
			if(receiptPrice < totalPrice){
				alert("实付金额低于应付金额！")
					
			}else{
				balance=receiptPrice-totalPrice;
				$("#balance").html(balance);
			}
			
		}
	</script>
</body>
</html>